<template>
  <div class="page-style">
    <outgoing-btn :select-arr="selectedArr" @search="search" @download="downloadFun" />
    <outgoing-tab :table-data="tabData" @selectedVal="selectedVal" />
    <pagination :total="total" @pagination="pageChange" />
  </div>
</template>

<script>
import outgoingBtn from './components/outgoing/outgoing-btn'
import outgoingTab from './components/outgoing/outgoing-tab'
import pagination from '@/components/Pagination'
import { getOutputList } from '@/api/wms'
import { getNowString } from '@/utils/index'

export default {
  components: {
    outgoingBtn,
    pagination,
    outgoingTab
  },
  data() {
    return {
      total: 0,
      selectedArr: [],
      p: 1,
      num: 10,
      tabData: [],
      production_order_num: ''
    }
  },
  created() {
    this.getOutputList()
  },
  methods: {
    pageChange(val) {
      console.log(val)
      this.p = val.page
      this.num = val.limit
      this.getOutputList()
    },
    selectedVal(val) {
      this.selectedArr = val
    },
    getOutputList() {
      const data = {
        p: this.p,
        num: this.num,
        order_num: this.production_order_num
      }
      getOutputList(data).then(res => {
        console.log(res)
        this.total = Number(res.count)
        this.tabData = res.list
      })
    },
    search(val) {
      console.log(val)
      this.production_order_num = val.bill_num
      this.getOutputList()
    },
    downloadFun() {
      import('@/vendor/Export2Excel').then(excel => {
        const theader = ['类别', '出库单号', '出库时间', '客户类别/客户编码', '客户名称', '总数量', '大条码数', '中条码数', '小条码数', '上传账号']
        const data = []
        this.tabData.forEach(item => {
          data.push([item.type === '1' ? '已入库产品发货' : '未入库产品发货', item.order_num, item.date, item.anent_content.code_num, item.anent_content.anent_name.anent_name, item.count_all_num, item.big_bar_code_num, item.in_bar_code_num, item.small_bar_code_num, item.bar_code_user_content.name])
        })
        excel.export_json_to_excel({
          header: theader,
          data,
          filename: '出库单据' + getNowString(),
          autoWidth: true,
          bookType: 'xlsx'
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
